<template>
  <div>
    <div class="wrapper">
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item of goods.pics" :key="item.id">
            <img :src="item.pic" alt />
          </van-swipe-item>
        </van-swipe>
        <div class="back" @click="goback">
          <p>
            <van-icon name="arrow-left" />
          </p>
        </div>
      </div>
      <div class="desc">
        <p>{{goods.basicInfo.name}}</p>
        <p>{{ goods.basicInfo.characteristic }}</p>
        <div class="price">
          <p>
            低价
            <span>￥{{ goods.basicInfo.minPrice}}</span>
          </p>
          <p>原价￥{{ goods.basicInfo.originalPrice }}</p>
          <p>库存{{ goods.basicInfo.stores}}</p>
        </div>
      </div>
      <van-tabs @click="onClick">
        <van-tab title="商品介绍">
          <div v-html="goods.content" class="goods"></div>
        </van-tab>
        <van-tab title="商品评价">
          <ul class="com">
            <li v-for="item of comment" :key="item.id">
              <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
              <div>
                <div>
                  <p>123123</p>
                  <p>{{ item.goods.goodReputationStr}}</p>
                </div>
                <p>{{ item.goods.goodReputationRemark}}</p>
                <div>
                  <p>2019-11-12 10:20:00</p>
                  <p>
                    选择规格:
                    <span>牛仔外套:L（175/92A）</span>
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
      <van-action-sheet v-model="show">
        <div class="content">
          <div>
            <img :src="pic" alt />
            <div>
              <p>{{name}}</p>
              <p>￥{{ price }}</p>
            </div>
          </div>
          <div class="propertylist">
            <div class="item" v-for="(item,index) of goods.properties" :key="index">
              <p>{{ item.name }}</p>
              <div class="s1">
                <div
                  class="redwu"
                  v-for="(p2,index) of item.childsCurGoods"
                  @click="getpro(p2.name,item.id,p2.propertyId)"
                  :key="index"
                >{{ p2.name }}</div>
              </div>
            </div>
          </div>
          <div class="num">
            <p>购买数量</p>
            <van-stepper v-model="value" />
          </div>
          <p class="addcart" @click="add">加入购物车</p>
        </div>
      </van-action-sheet>

      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
        <van-goods-action-icon icon="cart-o" :badge="n" @click="gocart" text="购物车" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="warning" text="加入购物车" @click="addCart" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  props: {},
  data() {
    return {
      goods: {},
      comment: [],
      show: false,
      value: 1,
      pic: "",
      name: "",
      price: "",
      ps: [],
      loading: true,
      p1: 0,
      p2: 0,
    };
  },
  watch: {},
  computed: {
    n() {
      return this.$store.getters.nums;
    },
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    gocart() {
      // 单击购物车图标进入购物车页

      this.$router.push("/gou");
    },
    addCart() {
      // 显示加入到购物车界面
      this.show = true;
    },
    add() {
      if (localStorage.getItem("token")) {
        var item = {
          id: this.goods.basicInfo.id,
          pic: this.pic,
          name: this.name,
          num: this.value,
          price: this.price,
          ps: this.ps,
        };

        this.$store.commit("addcart", item);
        this.show = false;
      } else {
        this.$router.push("/denglu");
      }
    },
    getpro(name, id1, id2) {
      //修改属性 更新价格
      this.ps.push(name);

      this.http({
        url: "https://api.it120.cc/small4/shop/goods/price",
        method: "post",
        params: {
          goodsId: this.goods.basicInfo.id,
          propertyChildIds: "id1,id2",
        },
      }).then((msg) => {
        // 获取到数据 更新的页面 这里还没处理
        console.log(msg);
      });
    },
  },
  created() {
    this.$axios
      .get(
        "https://api.it120.cc/small4/shop/goods/detail?id=" +
          this.$route.query.id
      )
      .then((msg) => {
        console.log(msg);
        if (msg.data.msg == "success") {
          this.goods = msg.data;
          this.pic = msg.data.basicInfo.pic;
          this.name = msg.data.basicInfo.name;
          this.price = msg.data.basicInfo.originalPrice;
          this.loading = false;
        }
      });

    this.$axios
      .get(
        "https://api.it120.cc/small4/shop/goods/reputation?goodsId=" +
          this.$route.query.id
      )
      .then((msg) => {
        console.log(msg);
        this.comment = msg.data;
      });
  },
  mounted() {},
};
</script>
<style lang="less">
.banner {
  position: relative;
  .van-swipe-item {
    img {
      width: 100%;
    }
  }
  .back {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 20px;
    top: 20px;
    border-radius: 50%;
    border: 0.02rem solid #ffffff;
    p {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: white;
      text-align: center;
      i {
        font-size: 0.3rem;
        color: #666;
        margin-top: 0.02rem;
      }
    }
  }
}
.desc {
  height: 1.24rem;
  background: #ffffff;
  padding-left: 0.2rem;
  border-bottom: 0.14rem solid #f5f5f5;
  > p:nth-of-type(1) {
    font-size: 0.22rem;
    color: #464646;
    margin-top: 0.3rem;
  }
  > p:nth-of-type(2) {
    font-size: 0.16rem;
    color: #b8b8b8;
    margin-top: 0.16rem;
  }
  .price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 0.2rem;
    p:nth-of-type(1) {
      font-size: 0.14rem;
      color: #cc0c0c;
      width: 0.9rem;
      span {
        font-size: 0.2rem;
      }
    }
    p:nth-of-type(2) {
      font-size: 0.14rem;
      color: #b8b8b8;
      margin-top: 0.06rem;
      width: 3.4rem;
    }
    p:nth-of-type(3) {
      font-size: 0.14rem;
      color: #b8b8b8;
      margin-top: 0.06rem;
    }
  }
}
.goods {
  width: 100%;
  overflow: hidden;
  ul {
    width: 100%;
    li {
      height: 0.47rem;
      line-height: 0.27rem;
      padding-left: 0.14rem;
      padding-right: 0.24rem;
      p {
        width: 100% !important;
        display: block !important;
        span {
          font-size: 0.2rem;
        }
      }
    }
  }
  .img-lazyloaded {
    width: 100% !important;
    height: 1.3rem !important;
  }
}
.com {
  li {
    height: 1.54rem;
    padding: 0 0.2rem;
    border-bottom: 0.01rem solid #e9e9e9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    > i {
      font-size: 0.8rem;
      margin-top: 0.18rem;
    }
    > div {
      margin-left: 0.14rem;
      > p:nth-of-type(1) {
        font-size: 0.16rem;
        margin-top: 0.1rem;
      }
      > div:nth-of-type(2) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 0.2rem;
        > p {
          font-size: 0.12rem;
          color: #b2b2b2;
        }
        > p:nth-of-type(2) {
          margin-left: 0.25rem;
        }
      }
      > div:nth-of-type(1) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 0.18rem;
        p:nth-of-type(1) {
          font-size: 0.16rem;
        }
        p:nth-of-type(2) {
          width: 0.48rem;
          height: 0.32rem;
          border-radius: 0.06rem;
          color: white;
          text-align: center;
          line-height: 0.32rem;
          background: #b7282e;
          font-size: 0.16rem;
          margin-left: 0.2rem;
        }
      }
    }
  }
}
.content {
  height: 5rem;
  > div:nth-of-type(1) {
    height: 1.23rem;
    border-bottom: 0.01rem solid #e9e9e9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    img {
      width: 0.85rem;
      height: 0.85rem;
      display: block;
      margin-left: 0.2rem;
      margin-top: 0.2rem;
    }
    div {
      margin-left: 0.16rem;
      width: 3.5rem;
      > p:nth-of-type(1) {
        font-size: 0.17rem;
        margin-top: 0.3rem;
      }
      > p:nth-of-type(2) {
        font-size: 0.18rem;
        color: #d00000;
        margin-top: 0.24rem;
      }
    }
  }
  > div:nth-of-type(2) {
    padding: 0.3rem 0;
    border-bottom: 0.01rem solid #e9e9e9;
    p {
      font-size: 0.16rem;
      margin-left: 0.2rem;
    }
    .s1 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      div {
        padding: 0.1rem 0.2rem;
        border-radius: 0.06rem;
        margin-top: 0.1rem;
        margin-left: 0.1rem;
      }
    }
  }
  .num {
    height: 0.98rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 0.2rem;
    > p {
      font-size: 0.16rem;
      letter-spacing: 0.01rem;
    }
  }
  .addcart {
    width: 100%;
    height: 0.6rem;
    text-align: center;
    line-height: 0.6rem;
    font-size: 0.22rem;
    color: white;
    background: #b7282e;
  }
}
.redwu.active {
  border: 1px solid #f00;
}
</style>